<template>
    <div class="brushhead">
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">刷头详情</span>
        <span slot="more"></span>
        </LoginHeader>
        <el-divider></el-divider>
        <div class="head">
            <img src="@/assets/njrpic/firstpic/pic_toothhalol.png" alt="">
        </div>
        <p>智能刷头
            <i class="el-icon-question" @click="jumpIT"></i>
        </p>
        <el-divider></el-divider>
        <div class="userinfo_item" v-for="(item,index) in brushlist" :key="index">
            <!-- <img src="@/assets/njrpic/firstpic/ic_detail_toothbrush_time.png" alt=""> -->
            <img :src="item.pic" alt="">
            <span>{{item.word}}</span>
            <i>{{item.descript}}</i>
        </div>
        <router-link tag="p" to="/index/first/whyexchange">为什么要更换刷头？</router-link>
        <el-button @click="exchange">更换刷头</el-button>
        <el-dialog
  title="更换刷头"
  :visible.sync="centerDialogVisible"
  width="80%"
  center>
  <span>更换刷头后重新计算刷头使用时间，是否确定更换刷头？</span>
<div>
    <img src="@/assets/njrpic/firstpic/ic_store.png" alt="">
    <el-link :underline="false" @click="jumphead">兑换刷头</el-link>
</div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
             centerDialogVisible:false,
        brushlist:[
                {pic:'',word:'已损耗',descript:'0%'},
                {pic:'',word:'剩余天数',descript:'30天'},
            ]
        }
    },
    components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        jumpIT(){
            this.$router.push('/index/first/IThead')
        },
        exchange(){
            this.centerDialogVisible=true
        },
        jumphead(){
            this.$router.push('/index/fans/shop')
        }
    }
}
</script>
<style lang="less" scoped>
.brushhead{
    
.el-divider{
    height: 10px;
    background-color: #eeeeee;
}
text-align: center;
.head{
    background-image: url('../../../assets/njrpic/firstpic/btn_camera.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #a29ef1;
    border: 1px solid #a29ef1;
    width: 350px;
    border-radius: 50%;
    height: 350px;
    margin: 0 auto;
    margin-top: 100px;
    img{
        width: 270px;
    margin-top: 33px;
    border-radius: 50%;
    }
}
.head+p{
    margin: 15px 0 150px;
    i{
        font-size: 45px;
    }
}
p{
    margin: 55px 0;
    color: #967bce;
}
.userinfo_item{
    display: flex;
    align-items: center;
    text-align: left;
    margin:10px 20px;
    padding: 5px;
    border-bottom: 5px solid #f4f4f4;
    img{
        width: 10%;
        margin-right: 25px;
    }
   span{
       flex: 4;
   }
   i{
       color: #a485e7;
   }
}

}
p+.el-button{
    width: 50%;
    border-radius: 35px;
    display: inline-block;
    padding: 20px 0;
    background-color: #5921c4;
    color: white;
}
.el-dialog{
    img{
        width: 12%;
    }
    div{
        margin: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-link{
            margin-left: 20px;
             color: #a485e7;
        }
    }
}
</style>